<template>
  <bs-dialog
    title="标签设置"
    :visible.sync="showFlag"
    size="defult"
    @closed="doCloseEdit"
    class="insert-test"
  >
    <template slot="main">
      <bs-main>
          <el-form
          :inline="true"
          ref="editorFormRef"
          label-width="110px"
          size="small"
          :show-message="false"
          :hide-required-asterisk="true"
          :status-icon="false">
            <el-form-item label="标签" prop="indexId" label-width="60px">
                <el-select-tree
                    placeholder="请选择所属标签"
                    :props="props"
                    :data="treeTagData"
                    :disabled-values="disabledValues"
                    v-model="tagIds"
                    :check-strictly="checkStrictly"
                    :clearable="clearable"
                    :multiple="true"
                    :default-expand-all="defaultExpandAll"
                ></el-select-tree>
            </el-form-item>
          </el-form>
      </bs-main>
    </template>
    <template slot="footer">
      <bs-confirm-button-icon @click.native="doSave"></bs-confirm-button-icon>
      <bs-cancel-button-icon :show-icon="false" @click.native="doCloseEdit"></bs-cancel-button-icon>
    </template>
  </bs-dialog>
</template>

<script>
export default {
  name: 'DeviceTagDialog',
  components: {
  },
  data() {
    return {
        props: {                // 配置项（必选）
            value: 'id',
            label: "name",
            owner: 'owner',
            children: 'children'
        },
        treeTagData:[],
        tagIds:[],
        disabledValues:[],
        checkStrictly: false,
        clearable: true,
        defaultExpandAll: false,

        showFlag: false,
    }
  },
  created() {
    this.$eventBus.$on('showDeviceTagDialog', this.show)
  },
  beforeDestroy() {
    this.$eventBus.$off('showDeviceTagDialog')
  },
  methods: {
    // 显示
    show(treeTagData,tagIds) {
      this.treeTagData = treeTagData
      this.tagIds = tagIds
      this.showFlag = true
    },
    // 关闭
    doCloseEdit: function () {
      this.showFlag = false
    },

    // 加载终端标签分组列表
    // loadTreeTagData() {
    //   this.$store.dispatch('device/doLoadTagTree', {}).then((res) => {
    //       if(res) {
    //           this.treeTagData = res.filter(v => {
    //               return v.name !== '内置标签'
    //           })
    //       }
    //   })
    // },

    doSave(){
        this.$emit('handleOkClick',this.tagIds,()=>{
          this.showFlag = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>

.insert-test {
  ::v-deep .el-dialog__body {
      margin-top: 30px;
      text-align: center;
  }
  ::v-deep .el-form-item--small .el-form-item__content {
    width: 200px;
    margin-bottom: 15px;
  }
  ::v-deep .el-form-item--small .el-form-item__label {
    text-align: center;
  }
  ::v-deep .el-select-tree {
        width: 200px;
    }
  ::v-deep .el-dialog {
      width: 340px;
      height: 190px;
  }
}
</style>
